<template>
  <div class="modal-overlay" @click="closeModal">
    <div class="countdown-card" @click.stop>
      <button class="close-button" @click="closeModal">×</button>
      <h1 class="title">⏰ 倒计时器</h1>
      
      <!-- 时间选择 -->
      <div class="time-selector">
        <div class="preset-times">
          <button 
            v-for="time in presetTimes" 
            :key="time.value"
            @click="setTime(time.value)"
            :class="{ active: selectedTime === time.value }"
            class="time-btn"
          >
            {{ time.label }}
          </button>
        </div>
        
        <div class="custom-time">
          <input 
            type="number" 
            v-model.number="customMinutes" 
            placeholder="自定义分钟"
            min="1"
            max="1440"
            class="custom-input"
          />
          <button @click="setCustomTime" class="set-btn">设置</button>
        </div>
      </div>
      
      <!-- 倒计时显示 -->
      <div class="timer-display">
        <div class="time-digits">
          <span class="digit-group">{{ formattedMinutes }}</span>
          <span class="separator">:</span>
          <span class="digit-group">{{ formattedSeconds }}</span>
        </div>
        <div class="time-label">
          <span>分钟</span>
          <span>秒</span>
        </div>
      </div>
      
      <!-- 控制按钮 -->
      <div class="controls">
        <button 
          v-if="!isRunning && remainingTime > 0" 
          @click="startTimer" 
          class="control-btn start"
        >
          开始
        </button>
        <button 
          v-if="isRunning" 
          @click="pauseTimer" 
          class="control-btn pause"
        >
          暂停
        </button>
        <button 
          v-if="!isRunning && totalTime > 0 && remainingTime !== totalTime" 
          @click="resetTimer" 
          class="control-btn reset"
        >
          重置
        </button>
      </div>
      
      <!-- 进度条 -->
      <div class="progress-bar">
        <div 
          class="progress-fill" 
          :style="{ width: progressPercent + '%' }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CountdownTimer',
  emits: ['close'],
  data() {
    return {
      // 预设时间 (分钟)
      presetTimes: [
        { label: '30分钟', value: 30 },
        { label: '15分钟', value: 15 },
        { label: '10分钟', value: 10 },
        { label: '5分钟', value: 5 }
      ],
      selectedTime: 10,         // 选中的预设时间，默认为10分钟
      customMinutes: null,     // 自定义分钟数
      totalTime: 10 * 60,      // 总时间(秒)，默认为10分钟
      remainingTime: 10 * 60,  // 剩余时间(秒)，默认为10分钟
      isRunning: false,        // 是否正在运行
      timerInterval: null      // 定时器引用
    }
  },
  computed: {
    minutes() {
      return Math.floor(this.remainingTime / 60)
    },
    seconds() {
      return this.remainingTime % 60
    },
    formattedMinutes() {
      return this.minutes.toString().padStart(2, '0')
    },
    formattedSeconds() {
      return this.seconds.toString().padStart(2, '0')
    },
    progressPercent() {
      if (this.totalTime === 0) return 0
      return ((this.totalTime - this.remainingTime) / this.totalTime) * 100
    }
  },
  methods: {
    closeModal() {
      this.$emit('close')
    },
    setTime(minutes) {
      this.selectedTime = minutes
      this.totalTime = minutes * 60
      this.remainingTime = this.totalTime
      this.isRunning = false
      this.clearTimer()
    },
    setCustomTime() {
      if (this.customMinutes && this.customMinutes > 0) {
        this.selectedTime = 0 // 取消预设时间的选中状态
        this.totalTime = this.customMinutes * 60
        this.remainingTime = this.totalTime
        this.isRunning = false
        this.clearTimer()
      }
    },
    startTimer() {
      if (this.remainingTime <= 0) return
      this.isRunning = true
      this.timerInterval = setInterval(() => {
        this.remainingTime--
        if (this.remainingTime <= 0) {
          this.finishTimer()
        }
      }, 1000)
    },
    pauseTimer() {
      this.isRunning = false
      this.clearTimer()
    },
    resetTimer() {
      this.remainingTime = this.totalTime
      this.isRunning = false
      this.clearTimer()
    },
    finishTimer() {
      this.clearTimer()
      this.isRunning = false
      // 可以在这里添加倒计时结束的提示音或动画
      alert('时间到!')
    },
    clearTimer() {
      if (this.timerInterval) {
        clearInterval(this.timerInterval)
        this.timerInterval = null
      }
    }
  },
  beforeUnmount() {
    this.clearTimer()
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.close-button {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid var(--vt-c-gold);
  color: var(--vt-c-gold);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button:hover {
  background: rgba(212, 175, 55, 0.4);
  transform: rotate(90deg);
}

.countdown-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 20px;
}

.countdown-card {
  background: linear-gradient(135deg, rgba(44, 62, 80, 0.9), rgba(26, 26, 46, 0.9));
  border-radius: 20px;
  padding: 30px;
  width: 90%;
  max-width: 500px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--vt-c-gold);
  backdrop-filter: blur(10px);
  position: relative;
}

.title {
  color: var(--vt-c-gold);
  margin-top: 0;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  font-size: 2rem;
  border-bottom: 2px solid rgba(212, 175, 55, 0.3);
  padding-bottom: 15px;
  margin-bottom: 25px;
}

.time-selector {
  margin-bottom: 30px;
}

.preset-times {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.time-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: #fff;
  padding: 10px 15px;
  margin: 5px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: bold;
}

.time-btn:hover {
  background: rgba(212, 175, 55, 0.3);
  transform: translateY(-2px);
}

.time-btn.active {
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  border-color: #a777e3;
  box-shadow: 0 0 15px rgba(110, 142, 251, 0.5);
}

.custom-time {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.custom-input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 50px;
  color: #fff;
  padding: 10px 15px;
  margin-right: 10px;
  width: 120px;
  font-size: 1rem;
  text-align: center;
}

.custom-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.custom-input:focus {
  outline: none;
  border-color: var(--vt-c-gold);
  background: rgba(255, 255, 255, 0.2);
}

.set-btn {
  background: linear-gradient(135deg, #ffd166, #ffa502);
  border: none;
  border-radius: 50px;
  color: #1a1a1a;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.set-btn:hover {
  background: linear-gradient(135deg, #ffdc73, #ffae0f);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.timer-display {
  margin: 30px 0;
}

.time-digits {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 4rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 10px;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
}

.digit-group {
  background: rgba(0, 0, 0, 0.3);
  padding: 15px;
  border-radius: 15px;
  min-width: 100px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.separator {
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.8);
}

.time-label {
  display: flex;
  justify-content: center;
  gap: 52px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  margin-top: 5px;
}

.controls {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 25px 0;
}

.control-btn {
  padding: 12px 25px;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.control-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.control-btn:active {
  transform: translateY(1px);
}

.start {
  background: #06d6a0;
  color: white;
}

.pause {
  background: #ff9f1c;
  color: white;
}

.reset {
  background: #ef476f;
  color: white;
}

.progress-bar {
  height: 15px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 20px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #06d6a0, #ffd166);
  border-radius: 10px;
  transition: width 0.5s ease;
}
</style>